<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				margin-top: 5px;
				margin-bottom: 20px;
				text-align: center;
			}
			ul{
				width: 200px;
				margin: 0 auto;
			}
		</style>
		<script src="data/jquery-3.4.1.min.js"
			
		</script>
	</head>
	<body>
		<div>
			班级：
			<select name="class">
				<option value="0">1813</option>
				<option value="1">1811</option>
				<option value="2">1823</option>
			</select>
			学号：
			<select name="stu_id">
				<option value="0">101</option>
				<option value="1">102</option>
			</select>
			<input type="button"  id="btn" value="查询" />
		</div>
		<ul>
			
		</ul>
		
		<script type="text/javascript">
			$(function(){
				var classidx = 0,stuidx=0;
				$("[name=class]").on("change",function(){
					classidx= $(this).val();
				})
				$("[name=stu_id]").on("change",function(){
					stuidx= $(this).val();
				})
				
				$.ajax(){
					url:'student.json',
					type:'get',
					dataType:'json',
					success:function(data) {
						var name = data[classidx].students[stuidx].stu_name;
						var score = data[classidx].students[stuidx].score;
						
						$("ul").empty();
						$("ul").append("<li>"+name+"</li>");
						$("ul").append("<li>"+score+"分"+"</li>");
						
					}
				}
			})
		</script>
	</body>
</html>
